<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span2"></div>
		<div class="span8">
			<div class="row-fluid">
				<!-- left side search box container-->
				<div class="span12">
					<h3>Create Trek</h3>
					<!-- form for Trekking event -->
					<div id="trekkingform" class="well">
						<s:form theme="simple" cssClass="form-horizontal"
							action="savetrek" method="post" enctype="multipart/form-data">
							<div class="control-group">
								<div class="controls">
									<s:if test="hasFieldErrors()">
										<div class="alert alert-error span8">
											<s:fielderror></s:fielderror>
										</div>
									</s:if>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrektitle">Your
									Trek Title*</label>
								<div class="controls">
									<s:textfield id="fortrektitle" maxlength="256" name="trektitle"
										cssClass="input-xxlarge" placeholder=""></s:textfield>

									<i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top" title="e.g. Weekend Trek To Bheemeshwari"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortreklocationname">Location*</label>
								<div class="controls">
									<s:select id="fortreklocationname" maxlength="100"
										name="location" cssClass="" list="locations"></s:select>
									<i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="e.g. Bangalore"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortreklocationdetails">Location
									Details</label>
								<div class="controls">
									<s:textarea id="fortreklocationdetails" name="locationdetail"
										cssClass="input-xxlarge" placeholder=""></s:textarea>
									<i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="e.g. Bheemeshwari To Sangama Via Muthathi"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="dp1">Start Date*</label>
								<div class="controls">
									<s:textfield style="background-color:white;" id="dp1"
										name="date" readonly="true" cssClass="input-small"
										placeholder=""></s:textfield> 
										<i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="select date when trek begins"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrekduration">Duration*</label>
								<div class="controls">
									<s:textfield id="fortrekduration" maxlength="3" name="duration"
										cssClass="input-mini" placeholder=""></s:textfield>
									Days <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="specify how many days trek will continue"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrekallowedpeople">Gender*</label>
								<div class="controls">
									<s:select id="fortrekallowedpeople" name="gender" cssClass=""
										list="{'Both Men & Women', 'Men', 'Women'}"></s:select> <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="select audience suitable for trek"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrekdistance">Distance*</label>
								<div class="controls">
									<s:textfield id="fortrekdistance" maxlength="5" name="distance"
										cssClass="input-mini" placeholder=""></s:textfield>
									Kms <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="specify the distance of trek"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrekdifficultylevel">Difficulty
									Level*</label>
								<div class="controls">
									<s:select id="fortrekdifficultylevel" name="difficultylevel"
										cssClass="" list="{'Easy', 'Moderate', 'Hard'}"></s:select> <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="select the difficulty level for trek"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrekgearsrequired">Gears
									Required</label>
								<div class="controls">
									<s:select id="fortrekgearsrequired" multiple="true"
										name="gears" cssClass=""
										list="{'Backpack', 'Trekking Shoes', 'Sleeping Bag','Sleeping Mat', 'Raincoat/Poncho', 'Tent/Tarp', 'GPS', 'Wind Cheater/Body Warmer', 'Nylon Rope', 'Torch', 'knief'}">
									</s:select> <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="select what are all trek gears required for the trek"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrekorganizationname">Organization
									Name*</label>
								<div class="controls">
									<s:textfield id="fortrekorganizationname" maxlength="100"
										name="organizationname" cssClass="input-xxlarge"
										placeholder=""></s:textfield> <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="specify if you belong to any organization/club e.g. BMC, if not mention your name"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrekorganizationdetails">Organization
									Mobile No.*</label>
								<div class="controls">
									<s:textfield id="fortrekorganizationphone" maxlength="15"
										name="organizationphone" cssClass="input-large" placeholder=""></s:textfield> <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="select organization, club or your phone number, customers will contact you on this number for any information"></i>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fortrekplan">Trek Plan</label>
								<div class="controls">
									<s:textarea id="fortrekplan" name="trekplan"
										cssClass="input-large" placeholder=""></s:textarea> <br /><i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="describe the trek plan in detail, refer the sample plan"></i>
										 <a><i class="icon-file-text icon-large" data-toggle="modal" data-target="#trekplanmodal"></i></a>
										
								</div>
							</div>
							<script>
								CKEDITOR.replace('trekplan');
							</script>
							<!-- Modal for trek plan sample -->
							<div id="trekplanmodal" class="modal hide fade" tabindex="-1"
								role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">×</button>
									<h3 id="myModalLabel">Sample Trek Plan</h3>
								</div>
								<div class="modal-body">
									<p>South of Bangalore in Mandya district, Bheeshwari is still untouched and virgin region of nature. Dark and deep woods, gushing water, chirping birds, hills in green bridals redefine the beauty of the nature.</p>
									<p><strong>Saturday: 11 August, 2013</strong></p><p><strong>6:00</strong>:&nbsp; Leave bangalore by 6 in the morning.</p>
									<p><strong>9:00:</strong> Reach Bheemeshwari (You can buy your breakfast according as your taste buds on the way)</p>
									<p>- First break at Muthathi<br>
- Second break at Galibore fishing camp (Have lunch there)<br>
- Final break at Sangam of Arkavathi and river Cauvery dam<br>
- Catch the bus at Kanakpura-Sangama highway</p>
<p><iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.co.in/maps?f=d&amp;source=s_d&amp;saddr=Bangalore,+Karnataka&amp;daddr=Bheemeshwari+Nature+Education+Camp,+Karnataka+to:Muthathi,+Kankapura,+Karnataka,+Kanakapura,+Karnataka+to:Galibore+Fishing+camp,+Karnataka+to:Sangama+-+Mutthatthi+Road&amp;geocode=FU_uxQAdw_-fBCltTrTJcBauOzHgT35R6MPf-A%3BFavauwAd4y6bBCk1M22WUOOuOzFU1kVhgpBU0g%3BFaXIuwAdhqqbBCGFN8a83vWWESlJ3dpIx-SuOzGFN8a83vWWEQ%3BFZNouwAd4KOcBCHR5k4uUJv9oykpCoxrf-WuOzHR5k4uUJv9ow%3BFXKkuwAdOJidBA&amp;aq=0&amp;oq=hegganuru&amp;sll=12.487532,77.514038&amp;sspn=0.698553,1.352692&amp;t=h&amp;hl=en&amp;mra=pr&amp;ie=UTF8&amp;ll=12.487532,77.514038&amp;spn=0.698553,1.352692&amp;output=embed" width="425"></iframe><br>
<small><a href="https://maps.google.co.in/maps?f=d&amp;source=embed&amp;saddr=Bangalore,+Karnataka&amp;daddr=Bheemeshwari+Nature+Education+Camp,+Karnataka+to:Muthathi,+Kankapura,+Karnataka,+Kanakapura,+Karnataka+to:Galibore+Fishing+camp,+Karnataka+to:Sangama+-+Mutthatthi+Road&amp;geocode=FU_uxQAdw_-fBCltTrTJcBauOzHgT35R6MPf-A%3BFavauwAd4y6bBCk1M22WUOOuOzFU1kVhgpBU0g%3BFaXIuwAdhqqbBCGFN8a83vWWESlJ3dpIx-SuOzGFN8a83vWWEQ%3BFZNouwAd4KOcBCHR5k4uUJv9oykpCoxrf-WuOzHR5k4uUJv9ow%3BFXKkuwAdOJidBA&amp;aq=0&amp;oq=hegganuru&amp;sll=12.487532,77.514038&amp;sspn=0.698553,1.352692&amp;t=h&amp;hl=en&amp;mra=pr&amp;ie=UTF8&amp;ll=12.487532,77.514038&amp;spn=0.698553,1.352692" style="color:#0000FF;text-align:left">View Larger Map</a></small></p>
								</div>
								<div class="modal-footer">
									<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
								</div>
							</div>
							<!-- Modal ends here -->
							<div class="control-group">
								<label class="control-label" for="forpicupload">Upload
									Pics</label>
								<div class="controls">
									<s:file id="forpicupload" label="File 1" name="fileUpload"
										cssClass="input-large" />
									<s:file id="forpicupload" label="File 2" name="fileUpload"
										cssClass="input-large" />
									<s:file id="forpicupload" label="File 3" name="fileUpload"
										cssClass="input-large" />
									<s:file id="forpicupload" label="File 4" name="fileUpload"
										cssClass="input-large" />
								</div>
							</div>
							<hr />
							<h4>Create Tickets</h4>
							<br />
							<div class="control-group">
								<label class="control-label" for="fortickettype">Ticket
									Type*</label>
								<div class="controls">
									<s:select id="fortickettype" name="tkttype" cssClass=""
										list="{'Paid', 'Free', 'Social Cause'}"></s:select> <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="choose the type of tikcet you want to create for this trek"></i>
								</div>
							</div>
							<div id="tktpricing">
								<div class="control-group">
									<label class="control-label" for="forticketquantity">Quantity*</label>
									<div class="controls">
										<s:textfield id="forticketquantity" maxlength="4"
											name="tktquantity" cssClass="input-mini" placeholder=""></s:textfield><i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="specify the number of ticket slots you have for this trek"></i>
									</div>
								</div>
								<div id="tktpaid">
									<div class="control-group">
										<label class="control-label" for="forticketamount">Amount
											(in Rs.)*</label>
										<div class="controls">
											<s:textfield id="forticketamount" maxlength="6"
												name="tktamount" cssClass="input-small" placeholder=""></s:textfield> <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="specify the amount of ticket"></i>
										</div>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="dp2">End Date*</label>
									<div class="controls">
										<s:textfield style="background-color:white;" id="dp2"
											name="tktenddate" readonly="true" cssClass="input-small"
											placeholder=""></s:textfield> <i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="select a date when ticket booking will close, this date should be before trek start date"></i>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="forticketdesc">Description</label>
									<div class="controls">
										<s:textarea id="forticketdesc" name="tktdescription"
											cssClass="input-xxlarge" placeholder=""></s:textarea> <br><i class="icon-info-sign icon-large" rel="tooltip"
										data-placement="top"
										title="specify what is included in ticket, offering etc., see sample for example"></i>
										<a><i class="icon-file-text icon-large" data-toggle="modal" data-target="#tktdesc"></i></a>
									</div>
								</div>
								<script>
								CKEDITOR.replace('tktdescription');
								</script>
								<!-- Modal for trek plan sample -->
							<div id="tktdesc" class="modal hide fade" tabindex="-1"
								role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">×</button>
									<h3 id="myModalLabel">Sample Ticket description</h3>
								</div>
								<div class="modal-body">
									<p>
									<b>Above charges include:</b> Non-A/C Transport, Basic Veg. Food (2 breakfast, 2 lunch, 1 evening snacks, 1 dinner), Tented accommodation with sleeping bags or Homestay, Rafting, Permission, First-aid kit, Guide/Coordinator/Instructor charges & miscellaneous charges
<br><br><b>Above charges does not include:</b> Anything not mentioned above
									</p>
									</div>
								<div class="modal-footer">
									<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
								</div>
							</div>
							<!-- Modal ends here -->
								<!--  <div class="control-group">
<label class="control-label" for="forticketallowedperorder">Ticket Allowed Per Order</label>
<div class="controls">
<s:textfield id="forticketallowedperorder" maxlength="4" name="tktallowedperorder" cssClass="input-mini" placeholder=""></s:textfield>
</div>-->
							</div>
							<div class="control-group">
								<div class="controls">
									<s:submit name="create" theme="simple"
										cssClass="btn btn-medium btn-danger" value="Create Trek"></s:submit>
								</div>
							</div>
						</s:form>
					</div>
					<!-- form for Trekking event ends here-->
				</div>
				<!-- left side search box container ends here-->

				<!-- right side search box container-->

				<!-- right side search box container ends here-->
			</div>
		</div>
		<div class="span2"></div>
	</div>
</div>
